import React, { useState } from 'react';

import { Layout } from 'antd';
import MyRouter from '@/routes/Router';

import SideMenu from '@/components/sandBox/SideMenu';
import TopHeader from '@/components/sandBox/TopHeader';

const { Content } = Layout;

const NewSandBox = () => {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <Layout>
      <SideMenu collapsed={collapsed}></SideMenu>
      <Layout>
        <TopHeader
          collapsed={collapsed}
          setCollapsed={setCollapsed}
        ></TopHeader>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <MyRouter></MyRouter>
        </Content>
      </Layout>
    </Layout>
  );
};

export default NewSandBox;
